<zoil:ZComponent x:Class="Sample.PhotoBrowser.Components.FlickrPhotoView"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:zoil="http://zoil.codeplex.com/schemas/2012"
                 xmlns:local="clr-namespace:Sample.PhotoBrowser.Components"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
                 MouseLeftButtonDown="OnMouseDown"
                 MouseLeftButtonUp="OnMouseUp"
                 TouchDown="OnMouseDown"
                 TouchUp="OnMouseUp"
                 zoil:ZInformationLandscape.ZoomTarget="True"
                 zoil:ZInformationLandscape.ZoomMargin="0,9,0,9">
    <i:Interaction.Behaviors>
        <zoil:ObjectManipulationBehavior IsDraggable="True"
                                         IsResizable="True"
                                         IsRotatable="True"
                                         IsInertiaEnabled="True" />
    </i:Interaction.Behaviors>
    <zoil:ZComponent.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="Scale" ScaleX="1" ScaleY="1"/>
            <RotateTransform x:Name="Rotate"/>
            <TranslateTransform x:Name="Translate" X="0" Y="0" />
        </TransformGroup>
    </zoil:ZComponent.RenderTransform>
    <zoil:ZComponent.Resources>
        <zoil:DummyConverter x:Key="dummyConverter"></zoil:DummyConverter>

        <local:StringConcatenator x:Key="StringConcatenator" />

        <Storyboard x:Key="HideShadowStoryboard">
            <DoubleAnimation To="1.3" Duration="0:0:0.2" Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleX"/>
            <DoubleAnimation To="1.3" Duration="0:0:0.2" Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleY"/>
            <DoubleAnimation To="30" Duration="0:0:0.2" Storyboard.TargetName="ShadowTranslate" Storyboard.TargetProperty="X"/>
        </Storyboard>
        <Storyboard x:Key="ShowShadowStoryboard">
            <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleX"/>
            <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleY"/>
            <DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="ShadowTranslate" Storyboard.TargetProperty="X"/>
        </Storyboard>

        <Style TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="Black"/>
        </Style>
    </zoil:ZComponent.Resources>
    <Grid>
        <Border Opacity="0.6" IsHitTestVisible="False">
            <Border.RenderTransform>
                <TranslateTransform x:Name="ShadowTranslate" X="10" Y="-10"/>
            </Border.RenderTransform>
            <local:Shadow/>
        </Border>

        <zoil:ZComponentFrames Focusable="False">
            
            <zoil:ZComponentFrames.FrameTransition>
                <DoubleAnimation From="1.0" To="0.0" Duration="00:00:00.5" FillBehavior="Stop" />
            </zoil:ZComponentFrames.FrameTransition>
            
            <zoil:ZComponentFrame WidthNeeded="0">
                <Grid Width="100" Height="100">
                    <Grid.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="#FFCCCCCC" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Border Background="Black" Margin="5" Grid.Row="0">
                        <Image x:Name="previewImage" Source="{Binding Path=SmallUrl, Converter={StaticResource dummyConverter}}" Grid.Row="0" Stretch="UniformToFill" />
                    </Border>
                    <Viewbox x:Name="previewViewBox" Grid.Row="1" Height="10">
                        <TextBlock x:Name="previewTitle" Text="{Binding Path=Title}" FontSize="10" Foreground="Black" HorizontalAlignment="Center" />
                    </Viewbox>
                </Grid>
            </zoil:ZComponentFrame>

            <zoil:ZComponentFrame WidthNeeded="275">
                <Grid Width="100" Height="100">
                    <Grid.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="White" Offset="0"/>
                            <GradientStop Color="#FFCCCCCC" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid Background="Black" Margin="5" Grid.Row="0">
                        <Image Source="{Binding Path=SmallUrl}" Grid.Row="0" Stretch="UniformToFill"/>
                        <Viewbox VerticalAlignment="Bottom">
                            <Border Background="#33000000" MaxWidth="300">
                                <StackPanel Orientation="Vertical" Margin="5">
                                    <TextBlock Foreground="White" Text="{Binding Path=Title}" FontWeight="Bold" FontSize="10" TextWrapping="NoWrap"/>
                                    <StackPanel Orientation="Horizontal">
                                        <Border>
                                            <Image Source="{Binding Path=BuddyIconUrl}" MaxHeight="16" MaxWidth="16" Stretch="UniformToFill"/>
                                        </Border>
                                        <TextBlock Foreground="White" Text="{Binding Path=UserName, StringFormat={}Username: {0}}" FontWeight="Normal" FontSize="8" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"/>
                                        <TextBlock Foreground="White" Text="{Binding Path=DateUploaded, StringFormat={}Date uploaded: {0}}" FontWeight="Normal" FontSize="8" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"/>
                                        <TextBlock Foreground="White" Text="{Binding Path=Views, StringFormat={}Views: {0}}" FontWeight="Normal" FontSize="8" TextWrapping="Wrap" TextTrimming="CharacterEllipsis"/>
                                    </StackPanel>
                                    <TextBlock Foreground="White" Text="{Binding Path=Description, StringFormat={}Description: {0}}" TextWrapping="Wrap" FontWeight="normal" FontSize="8"/>
                                    <TextBlock Foreground="White" Text="{Binding Path=Tags, StringFormat={}Tags: {0}, Converter={StaticResource ResourceKey=StringConcatenator}}" TextWrapping="Wrap" FontWeight="Normal" FontSize="8" TextTrimming="CharacterEllipsis"/>
                                </StackPanel>
                            </Border>
                        </Viewbox>
                    </Grid>
                    <Viewbox Grid.Row="1" Height="10">
                        <TextBlock Text="{Binding Path=Title}" FontSize="40" Foreground="Black" HorizontalAlignment="Center" MaxWidth="200" MinWidth="200"/>
                    </Viewbox>
                </Grid>
            </zoil:ZComponentFrame>
        </zoil:ZComponentFrames>
    </Grid>
</zoil:ZComponent>
